
import "../navigator/navigator.scss"
import { Button, Row, Col } from 'tdesign-mobile-react';
import { Link,  useLocation } from 'react-router-dom';
import routes from "../../router/router";
import React, { useEffect,useState } from "react";
import { SystemSumIcon, Gamepad1Icon, EarphoneIcon, Film1Icon } from "tdesign-icons-react";

const iconSize = "30px" // 图标尺寸
const iconArr = [<SystemSumIcon size={iconSize} />, <Gamepad1Icon size={iconSize} />, <EarphoneIcon size={iconSize} />, <Film1Icon size={iconSize} />]
// 路由匹配
function getByPath(path = null) {
    let id;
    if (path) {
        let i = 0;
        let len = routes.length;
        for (; i < len; i++) {
            let ev = routes[i];
            if (ev.path === path) {
                id = ev.id;
            }
        }
    }
    return id;
}

function Navigator() {
    const location = useLocation();
    const [key, setKey] = useState(getByPath(location.pathname));
    return (<>
        <div className="nav-container">
            <div className="router-links">
                <Row align="center" justify="space-between" gutter={16}>
                    {routes.map((item, index) => {
                        return (<React.Fragment key={item.id}>
                            <Col span={6} >
                                <Link to={item.path}>
                                    <Button variant="text" onClick={() => setKey(item.id)}>
                                        <div className={`link-button-nav ${item.id === key ? 'actvity' : ''}`}>
                                            {iconArr[index]}
                                            <span>{item.name}</span>
                                        </div>
                                    </Button>
                                </Link>
                            </Col>
                        </React.Fragment>)
                    })}
                </Row>
            </div>
        </div>
    </>)
}
export default Navigator